<template>
  <div class="block">
    <el-carousel trigger="click" height="535px">
      <el-carousel-item v-for="item in pictureList" :key="item.pictureId">
        <router-link :to="'index/show?newsId='+item.newsId">
          <div class="imgBox">
            <img :src="'http://localhost:63135/image/'+item.link" alt />
            <h2 class="textBox">{{item.text}}</h2>
          </div>
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pictureList: []

    }
  },
  created () {
    this.getPictureList()
  },
  methods: {
    async getPictureList () {
      const { data: res } = await this.$http.get('api/picture')
      //   console.log(res)
      this.pictureList = res.Table
    }
  }
}
</script>
<style lang="less" scoped>
.imgBox {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .textBox {
    display: block;
    z-index: 10;
    position: absolute;
    background-color: #fff;
    opacity: 0.5;
    bottom: 30px;
    width: 100%;
    text-align: center;
  }
}
a {
  text-decoration: none;
  color: #000000;
}
</style>
